import { Line, LineConfig } from '@ant-design/plots';
import { Tprops } from './types';
import WarpDiv from './warp';
import { titleStyle } from './config';
import { useCallback, useEffect, useState } from 'react';
const MK={
    m:'月',
    w:'周'
}
type Tkeys= keyof typeof MK
type TP={
    type?:{
        label:string,
        value:Tkeys
    }[],
    [keys:string]:any
}

const LineQu = (props: Tprops&TP) => {
    const [activeType,setActive] =useState<keyof typeof MK>('m')
    const [config,setConfig]= useState<LineConfig>({
        data:props.data|| [],
        // xField: (d) => new Date(d.year),
        xField: 'labelName',
        yField: 'value',
        axis: {
            y: {
                labelFormatter: (val) => `${val}`
            },
            x:{
                 labelFormatter: (val) => `${val}`
            }
        },
        tooltip:{
            title:(v:any)=>(`${v.labelName}月`),
            items: [{ channel: 'y' ,valueFormatter:(v)=>v}],
            // valueFormatter:(v)=>`${v.value}Kw`
        },
        sizeField: 'value',
        shapeField: 'trail',
        legend: { size: false },
        colorField: 'category',
        title: {
            title: props.title,
            ...titleStyle
        },
        smooth: true,
        animate: { enter: { type: 'growInX' } }
    });
    const showData = useCallback(function (type:any){
        console.log(props[type+'Data'])
        setData(type)
    },[getTitle])
    function getTitle(){
        console.log(activeType)
        return props.title?.replace(/\{type}/g,MK[activeType])
    }
    function setData(type:any){
        setConfig({...config,data:props[type+'Data'],title:{...config.title,title:getTitle()}})
        console.log(getTitle())
        setActive(type)
    }
    useEffect(()=>{
        if(props.type?.length){
            setData(props.type[0].value)
        }else{
            setConfig({...config,data:props.data})
        }
    },[setConfig])
    return <WarpDiv subTitle={props.type?.map(v=><span className={[activeType===v.value?'active':'','s-t'].join(' ')} onClick={()=>showData(v.value)}>{v.label}</span>)}> 
    
         <Line  {...config} /></WarpDiv>;
};


export default LineQu